<script name="TableListIndex">
import eventBus from "@/utils/eventBus";
import { usePagination } from "@/utils/composables";
import { parseTime } from "@/utils/aidex";
import { listDbTable } from "@/api/tool/gen";
export default {
  setup(props, { emit }) {
    const {
      pagination,
      getParams,
      onSizeChange,
      onCurrentChange,
      onSortChange
    } = usePagination();
    const router = useRouter();

    const data = ref({
      loading: false,
      /**
       * 详情展示模式
       * router 路由跳转
       * dialog 对话框
       * drawer 抽屉
       */
      formMode: "drawer",
      // 详情
      formModeProps: {
        visible: false,
        id: ""
      },
      // 搜索
      search: {
        name: "",
        deptId: ""
      },
      // 批量操作
      batch: {
        enable: false,
        selectionDataList: []
      },
      // 列表数据
      dataList: []
    });

    // 页面挂载时 调用
    onMounted(() => {
      getDataList();
      if (data.value.formMode === "router") {
        eventBus.on("get-data-list", () => {
          getDataList();
        });
      }
    });
    //
    onBeforeUnmount(() => {
      if (data.value.formMode === "router") {
        eventBus.off("get-data-list");
      }
    });

    // 每页数量切换
    function sizeChange(size) {
      onSizeChange(size).then(() => getDataList());
    }

    // 当前页码切换（翻页）
    function currentChange(page = 1) {
      onCurrentChange(page).then(() => getDataList());
    }

    // 字段排序
    function sortChange(prop, order) {
      onSortChange(prop, order).then(() => getDataList());
    }
    // 查询
    function getDataList() {
      data.value.loading = true;
      let params = getParams();
      data.value.search.tableName &&
        (params.tableName = data.value.search.tableName);
      listDbTable(params).then((res) => {
        data.value.loading = false;
        data.value.dataList = res.rows;
        pagination.value.total = res.total;
      });
    }
    // 点击确认
    function checkTable() {
      emit("checkTable", {
        checkTable: data.value.batch.selectionDataList,
        unshow: false
      });
      console.log("xxxx");
    }
    return {
      checkTable,
      data,
      getDataList,
      pagination,
      getParams,
      onSizeChange,
      onCurrentChange,
      onSortChange,
      sizeChange,
      currentChange,
      sortChange
    };
  }
};
</script>

<template>
  <div>
    <page-main style="height: calc(100vh - 360px); margin: 10px">
      <search-bar>
        <el-form
          :model="data.search"
          size="default"
          label-width="auto"
          label-suffix=""
        >
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="表名称">
                <el-input
                  v-model="data.search.tableName"
                  placeholder="请输入表名称"
                  clearable
                  @keydown.enter="currentChange()"
                  @clear="currentChange()"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" @click="currentChange()">
                  <template #icon>
                    <el-icon>
                      <svg-icon name="ep:search" />
                    </el-icon>
                  </template>
                  查询
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>

      <div style="height: calc(100vh - 480px); overflow-y: auto">
        <el-table
          ref="table"
          v-loading="data.loading"
          class="list-table"
          :data="data.dataList"
          border
          highlight-current-row
          row-key="id"
          @sort-change="sortChange"
          @selection-change="data.batch.selectionDataList = $event"
        >
          >
          <el-table-column type="selection" align="center" />
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="80"
          />
          <el-table-column
            prop="tableName"
            label="表名称"
            show-overflow-tooltip
          />
          <el-table-column prop="tableComment" label="表描述" align="center" />
          <el-table-column prop="updateTime" label="更新时间" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" />
        </el-table>
      </div>

      <el-pagination
        :current-page="pagination.page"
        :total="pagination.total"
        :page-size="pagination.size"
        :page-sizes="pagination.sizes"
        :layout="pagination.layout"
        :hide-on-single-page="false"
        class="pagination"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </page-main>
  </div>
</template>

<style lang="scss" scoped>
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
